<template>
  <el-form ref="form" :model="formData" :label-width="labelWidth + 'px'" size="mini">
    <el-row>
      <el-col v-for="(item, index) in detailsList" :span="item.span ? item.span : 24" :key="index">
        <el-form-item v-if="item.type == 'slot'" :label="item.label">
          <slot :name="item.field"> </slot>
        </el-form-item>
        <el-form-item v-else :label="item.label">{{ formData[item.field] }}</el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: 'hk-details',
  props: {
    labelWidth: {
      type: String,
      default() {
        return '100'
      },
    },
    detailsList: {
      type: Array,
      default() {
        return []
      },
    },
    formData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  watch: {
    formData: {
      handler(newVal) {
        // console.log(newVal)
      },
    },
  },
  methods: {},
}
</script>

<style scoped></style>
